<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">出货记录</small>
      </a>
      <a class="operation" v-on:click="show = !show">
        <i class="el-icon-setting"></i> 操作
      </a>
  
      <!--dialog-->
      <transition name="fade">
        <div class="operatbox" v-show="show">
          <router-link  :to='{name:"Chjllistupdate",query:{
           unid:this.itemunid
          }}'>修改</router-link>
          <a @click="handleDelete()">删除</a>
        </div>
      </transition>
    </header>
  
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span><em>*</em>食品类型</span>
            <div class="froms">
              <el-radio-group v-model="typeradio">
                <el-radio :label="0" disabled>预包装食品</el-radio>
                <el-radio :label="1" disabled>食品农产品</el-radio>
                <el-radio :label="2" disabled>散装加工食品</el-radio>
              </el-radio-group>
            </div>
          </li>
          <li>
            <span> <em>*</em>食品类别</span>
            <div class="froms">
              <label>{{this.listData.demandWarehouse.demandType.name}}</label>
  
            </div>
          </li>
          <li>
            <span>     <em>*</em>食品名称</span>
            <div class="froms">
              <label>{{listData.demandWarehouse.name}}</label>
  
            </div>
          </li>
          <li>
            <span><em>*</em>品牌</span>
            <div class="froms">
              <label>{{listData.brand}}</label>
            </div>
          </li>
           <li>
            <span><em>*</em>规格含净量</span>
            <div class="froms">
              <label>{{listData.brand}}</label>
            </div>
          </li>
          <li>
            <span><em>*</em>出库数量</span>
            <div class="froms">
              <label>{{listData.shipments}}</label>
  
            </div>
          </li>
          <li>
            <span> <em>*</em>数量单位</span>
            <div class="froms">
              <label>{{listData.unit}}</label>
  
            </div>
          </li>
          <li>
            <span>  <em>*</em>出货日期</span>
            <div class="froms">
              <label>{{listData.stockDate|time}}</label>
            </div>
          </li>
          <li>
            <span> <em>*</em>记录人员</span>
            <div class="froms">
              <label>{{listData.recordPersonName}}</label>
  
            </div>
          </li>
          <li>
            <span><em>*</em>记录时间</span>
            <div class="froms">
              <label>{{listData.recordDate|time}}</label>
            </div>
          </li>
        </ul>
        <div class="filedetail">
          <p><i class="el-icon-document"></i>上传购票票据，食品合格证明文件</p>
          <ul>
            <li v-for='item of FileDatalist' :unid="item.unid" :path="item.fullPath">
              {{item.fullFileName}}
              <el-button type="primary" icon="search" size="mini" @click="imgview(item.fullPath)" class="c_f">查看</el-button>
            </li>
          </ul>
          <mt-popup v-model="popupVisible" modal=false class="mint-popup-2">
            <img src='' id="imgInit">
          </mt-popup>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  import {
    DemandCertificateOutputDelete
  } from '../../api/api';
  import {
    DemandCertificateOutputDetail
  } from '../../api/api';
  import {
    FileData
  } from '../../api/api';
  import {
    Popup
  } from 'mint-ui';
  export default {
     components: {
    'mt-popup':Popup,
    },
    data() {
      return {
        listData: {},
        typeradio: '',
        name:'',
        FileDatalist:[],
        popupVisible:false,
        itemunid:this.$route.query.unid,
        show: false, //默认隐藏
      };
    },
    methods: {
      //获取file
      getfilelist() {
        let FileDataparam = {
          params: {
            MainDataUnid: this.$route.query.unid,
            PageSize: 100,
            CurrentPage: 1
          }
        }
        FileData(FileDataparam).then((res) => {
          if (res.success === true) {
            this.FileDatalist = res.data;
          }
        })
      },
      //查看图片
      imgview: function(path) {
        this.popupVisible = true
      //  var  adres = "http://fq.fjyousun.com/" + path;
        var  adres = "http://psnffs.com/" + path;
        document.getElementById('imgInit').src  =  adres;
      },
      //数据加载方法
      getData() {
        //定义需要传给通讯的参数： unid    
        let options = {
          params: {
            id: this.$route.query.unid,
          }
        }
        //调取接口
        DemandCertificateOutputDetail(options).then((res) => {
          if (res.success === true) {
            this.listData = res.data;
            this.typeradio = this.listData.type
          }
        })
      },
      
      //删除方法
      handleDelete() {
        let deletParams = {
          params: {
            ids: this.$route.query.unid,
          }
        }
        this.$confirm('是否删除此条信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          DemandCertificateOutputDelete(deletParams).then((res) => {
            this.getData();
              if (res.success===true) {
                this.$message.success(res.msg);
               this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
          });
        });
      },
  
    },
    created() {
      this.getData();
      this.getfilelist();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
 
</style>
